<html>
<head>
	<title>Dragon Power Admin</title>

	<link rel="stylesheet" href="css/styles.css">

	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/plugins.js"></script>
	<script src="scripts/admin.js"></script>

</head>
<body>


<header>
	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="Dragon Power"></a></h1>
	<ul class="nav">
		<li class="active"><a href="#"><img class="icon" src="images/dashboard.png">Dashboard</a></li>
		<li class="with-subnav"><a href="#"><img class="icon" src="images/members.png">Members</a>

			<ul>
				<li><a href="#">Add New</a></li>
				<li><a href="#">Search</a></li>
			</ul>

		</li>
		<li><a href="#"><img class="icon" src="images/inbox.png">Inbox <span class="notification" title="You have 15 new messages">15</span></a></li>
		<li><a href="#"><img class="icon" src="images/statistics.png">Reports</a></li>
	</ul>
</header>


<div id="content">
	<div class="box"> 
   <!--Title-->
   <div class="header">
    <h2>Table with container</h2>
    </div>
   <!--Content-->
   <div class="content clearfix"> 
    <!--Table-->
    <table class="datatable">
     <thead>
      <tr>
       <th> Rendering engine </th>
       <th> Browser </th>
       <th> Platform(s) </th>
       <th> Engine version </th>
       <th> CSS grade </th>
      </tr>
     </thead>
     
    <tbody><tr class="gradeA odd">
       <td class=" sorting_1">Gecko</td>
       <td>Firefox 1.5</td>
       <td>Win 98+ / OSX.2+</td>
       <td class="center">1.8</td>
       <td class="center">A</td>
      </tr><tr class="gradeA even">
       <td class=" sorting_1">Gecko</td>
       <td>Firefox 2.0</td>
       <td>Win 98+ / OSX.2+</td>
       <td class="center">1.8</td>
       <td class="center">A</td>
      </tr><tr class="gradeA odd">
       <td class=" sorting_1">Gecko</td>
       <td>Firefox 3.0</td>
       <td>Win 2k+ / OSX.3+</td>
       <td class="center">1.9</td>
       <td class="center">A</td>
      </tr>
      </tbody>
      </table>
      <div class="dataTables_info">Showing 1 to 3 of 50 entries</div>
      <div class="dataTables_paginate">


	    <a href="#">First</a>
	    <a href="#">Previous</a>
	    <a href="#">1</a>
	    <a href="#">2</a>
	    <a href="#">3</a>
	    <a href="#">4</a>
	    <a href="#">5</a>
	    <a href="#">Next</a>
	    <a href="#">Last</a>


      </div>
      </div>
   </div>


   <div class="box">
   <div class="header">
    <h2>Form Styles</h2>
    <!--Draggable--> 
    <span class="draggable"></span> 
    <!--Toggle--> 
    <span class="toggle"></span> </div>
   <div class="content padding"> 
    <!--Form Elements-->
    <form>
     <fieldset>
      <legend>Form Styles</legend>
      <div class="field">
       <label>Text Input</label>
       <input type="text" />
      </div>
      <div class="field">
       <label>Medium Text Input</label>
       <input type="text" class="medium" />
      </div>
      <div class="field">
       <label>Large Text Input</label>
       <input type="text" class="large" />
      </div>
      <div class="field">
       <label>File Input:</label>
       <input type="file" />
      </div>
      <div class="field">
       <label>Select Input:</label>
       <select>
        <option>Option #1</option>
        <option>Option #2</option>
        <option>Option #3</option>
       </select>
      </div>
      <div class="field">
       <label>Radio Input:</label>
       <label>
        <input name="radio" type="radio" checked />
        Radio Option</label>
       <label>
        <input name="radio" type="radio" />
        Radio Option</label>
       <label>
        <input name="radio" type="radio" />
        Radio Option</label>
      </div>
      <div class="field">
       <label>Checkbox Inputs:</label>
       <label>
        <input type="checkbox" name="check" checked="checked" />
        Check Option</label>
       <label>
        <input type="checkbox" name="check" />
        Check Option</label>
       <label>
        <input type="checkbox" name="check" />
        Check Option</label>
      </div>
      <div class="field">
       <label>Textarea Input:</label>
       <textarea rows="7" cols="50"></textarea>
      </div>
      <input type="submit" value="Add Member" class="button" />
     </fieldset>
    </form>
   </div>
  </div>


  <div class="box one_half"> 
   <!--Title-->
   <div class="header">
    <h2>Tabs</h2>
    <!--Draggable--> 
    <span class="draggable"></span> 
    <!--Toggle--> 
    <span class="toggle"></span> </div>
   <!--Content-->
   <div class="content">
    
     <!--navigation-->
     <ul class="navigation">
      <li class="active"><a href="#tab1">Tab1</a></li>
      <li><a href="#tab2">Tab2</a></li>
      <li><a href="#tab3">Tab3</a></li>
     </ul>
     <!--tabs-->
     <div class="tabs"> 
     <div class="tab" id="tab1">
      <h6>Content Tab1</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis. Praesent imperdiet ornare pharetra. Pellentesque lorem elit, tristique et sodales ac, lacinia nec sem. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis. Praesent imperdiet ornare pharetra. Pellentesque lorem elit, tristique et sodales ac, lacinia nec sem. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis.</p>
     </div>
     <div class="tab" id="tab2">
      <h6>Content Tab2</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis. Praesent imperdiet ornare pharetra. Pellentesque lorem elit, tristique et sodales ac, lacinia nec sem. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis. Praesent imperdiet ornare pharetra. Pellentesque lorem elit, tristique et sodales ac, lacinia nec sem. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis.</p>
     </div>
     <div class="tab" id="tab3">
	      <h6>Content Tab3</h6>
	      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis. Praesent imperdiet ornare pharetra. Pellentesque lorem elit, tristique et sodales ac, lacinia nec sem. </p>
	      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis. Praesent imperdiet ornare pharetra. Pellentesque lorem elit, tristique et sodales ac, lacinia nec sem. </p>
	      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ligula ut augue dignissim lacinia quis id turpis.</p>
     </div>
    </div>
   </div>
  </div>


  </div>


</body>
</html>